<template>
  <Transition appear>
    <div class="box" v-show="flag">456</div>
  </Transition>
  <Transition appear name="tans">
    <div class="box" v-show="flag">456</div>
  </Transition>
<div>
  <button @click="flag=!flag">点击</button>
</div>

</template>

<script setup>
import { ref } from "vue";
const flag=ref(true)
</script>

<style scoped>
.box{
  background-color: red;
  padding:20px;
  display: inline-block;
  margin:10px 0
}
/* 当需要设置多个transition动画时，必须要加name属性区分，不加name属性的样式以前缀.v开头 */
/* 只有开始和结束状态的样式一样才能合在一起写 */
.v-enter-from,.v-leave-to{
  opacity: 0;
}
.v-enter-active,.v-leave-active{
  transition: 2s ease;
}
/* 如果想在下面这两个状态添加其他动画效果就不能省略了 */
.v-enter-to,.v-leave-from{
  transform: rotate(360deg);
}


.tans-enter-active{
  animation: identifier 2s ease;
}
.tans-leave-active{
  animation: identifier 2s ease reverse;
}

@keyframes identifier {
  from{
    transform: scale(0);
  }
  50%{
    transform: scale(2) rotateX(360deg);
  }
  to{
    transform: scale(1)
  }
}
</style>
